<template>
	<m-layout class="box" title="修改登录密码" gap="30">
		<m-text block spa="0 0 20 0">手机号</m-text>
		<m-input class="form-Item  "  disabled v-model="phonemaill" placeholder="请输入您的手机号">
		</m-input>
		<m-text block spa="20 0">验证码</m-text>
		<m-input :isLine="false" class="form-Item  " gap="15 14" v-model="code" :clear="false" placeholder="请输入您的验证码">
			<m-sendCode :value="phonemaill" slot="right"></m-sendCode>
		</m-input>
		<m-text block spa="20 0">新密码</m-text>
		<m-input :isLine="false" class="form-Item"  type="password" v-model="password" placeholder="密码必须6-12位字母和数字组合"> </m-input>
		<m-text block spa="20 0">再次确认密码</m-text>
		<m-input :isLine="false" class="form-Item" type="password" @blur="secondary" v-model="password2" placeholder="再次确认密码">
		</m-input>
		<m-button spa="100 0 0"  block :loading="resetLoading" @click="resetpwd">确认修改</m-button>
	</m-layout>
</template>

<script>
	import { email, mobile,enHisNum } from '@/libs/fn/verify.js'
	import { SetPassword } from '@/api/Users.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				phonemaill: "",
				oldpassword: '',
				password: '',
				password2: '',
				code: '',

				resetLoading: false,
				timeObj: '',
				timer: 0,
				codeLoading: false,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
			})
		},
		mounted() {
			this.phonemaill = this.userinfo.phone || this.userinfo.email
		},
		methods: {
			switchAccount() {
				this.phonemaill = email(this.phonemaill) ? this.userinfo.phone : this.userinfo.email
			},
			secondary() {
				if (this.password != this.password2) {
					this.Toast(this.$t('两次密码输入有误'))
				}
			},

			async resetpwd() {
				if (!this.phonemaill) {
					this.Toast('请输入您的邮箱')
					return
				}
				if (!this.password) {
					this.Toast('请输入密码')
					return
				}
				if (!this.code) {
					this.Toast('请输入您的验证码')
					return
				}
				if (!enHisNum(this.password)) {
					this.Toast('密码必须6-12位字母和数字组合')
					return
				}
				if (this.password != this.password2) {
					this.Toast('两次密码输入有误')
					return
				}
				this.resetLoading = true;
				const success = await SetPassword({
					usename: this.phonemaill,
					phonemaill: this.phonemaill,
					password: this.password,
					code: this.code,
				})
				this.resetLoading = false;
				if (success) {
					await this.sleep(1000)
					this.Jump()
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.box{
		min-height: 100vh;
	}
	text {
		display: block;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;

	}

	.form-Item {
		margin: 40rpx 0;
		// border: 1px solid #4D536B;
		border-radius: 15rpx;
		padding: 20rpx 28rpx;
		box-sizing: border-box;

		input {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
		}

		/deep/ uni-textarea {
			width: 100%;
			font-size: 26rpx;
			margin: 0;

			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;

		}
	}

	.form-Item-1 {
		padding: 10rpx 28rpx;
	}
</style>